import styled from 'styled-components';
import { useNavigate } from 'react-router-dom'
const NotFoundWrapper = styled.div`
  text-align: center;
  margin-top: 50px;
`;
const H1=styled.h1`
  font-size: 36px;
  margin-bottom: 20px;
`;
const P=styled.p`
  font-size: 18px;
  margin-bottom: 20px;
`;
const Button=styled.button`
  background-color: #007aff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  &:hover{
    background-color:rgb(0, 100, 207);
  }
`;

const NotFound = () => {
    const navigate = useNavigate()
  return (<NotFoundWrapper style={{ textAlign: 'center' }}>
  <H1>404 Not Found</H1>
  <P>Sorry, the page you are looking for does not exist.</P>
  <P>Please check the URL or try again later.</P>
  <Button onClick={() => navigate(-1)}>Go Back</Button>
</NotFoundWrapper>)
};

export default NotFound;